<template>
  <div>
    <!-- 提示框 -->
    <div class="Cjfz_chao">
      <h4 style="margin-left: 1%;">操作说明:</h4>
      <p class="Cjfz_p"> * 该功能主要用于学生成绩的分组</p>
    </div>
    <!-- 上下分级 -->
    <div>
      <div>
        <el-form :inline="true" :model="arrclass" class="demo-form-inline">
          <el-form-item style="margin-left: 1%;margin-top: 1%;">
            <el-select v-model="arrclass.name" placeholder="所属项目">
            <el-option v-for="(i,index) in arr " :key="index" 
              :label="i.name" :value="i.name"></el-option>
            </el-select>
          </el-form-item>
          <el-button
            type="primary"
            id="tj"
            icon="el-icon-circle-plus-outline"
            @click="dialogVisible = true"
          >添加</el-button>              
        </el-form>
      </div>
      <!-- 上下分级 -->
      <div style="overflow: hidden; margin-top: 1%">
        <el-table
          :data="CjiFen"
          border
          stripe
          v-loading="loading"
          style="width: 99%;margin-left: 1%;"
        >
          <el-table-column prop="id" label="序号" width="100"></el-table-column>
          <el-table-column prop="grouping" label="分组名称" ></el-table-column>
          <el-table-column prop="state" label="分组状态" ></el-table-column>        
          <el-table-column
            style="text-align: center"
            prop="operation"
            label="操作"
            width="250">
            <el-button @click="drawer = true" size="mini" type="primary">
              编辑
            </el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </el-table-column>
        </el-table>
        <!-- 上下分级，下添加学生 -->
        <el-dialog
          title="添加成绩分组"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
            :model="CjiFen"
            :rules="rules"
            ref="CjiFen"
            label-width="100px"
            class="demo-CjiFen"
          >
            <el-form-item label="学生姓名" prop="name">
              <el-input v-model="CjiFen.name" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="所属班级">
              <el-select v-model="CjiFen.class_name" placeholder="请选择班级">
                <el-option v-for="(i,index) in arr" :key="index"
                :label="i.name" :value="i.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学生状态" prop="state">
              <el-select v-model="CjiFen.state" placeholder="有效">
                <el-option label="有效" value="1"></el-option>
                <el-option label="无效" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('CjiFen')"
              >确认</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogVisible:false,
      CjiFen:[],
      arrclass:{
        name:'',
      },
      arr:{}
    }
  },
  methods:{
    // 请求班级
    outclasss() {
      this.$http.get(`/api/getclass`).then((res) => {
        this.arr = res.data
        console.log(this.arr)
      });
    },
    // 请求分组数据
    grouping(newValue){
      this.$http.get(`/api/getgrouping?grouping=`+newValue).then((res) => {
        this.CjiFen = res.data
        console.log(this.CjiFen)
      });
    }
  },
  watch:{
    'arrclass.name'(newValue){
      this.grouping(newValue)
    }
  },
  created(){
    this.outclasss()
  }
}
</script>


<style scoped>
/* 提示框 */
  .Cjfz_chao{
    border-radius: 15px;
    line-height: 30px;
    background-color: rgb(212, 306, 301);
    margin-top: 15px;
    margin-left: 4%;
  }
  .Cjfz_p{
    font-size: 12px;
    padding-left: 1%;
  }
  #tj{
    float: right;
    margin-right: 4%;
    margin-top: 1%;
  }
</style>